<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/cart.css">



    <title>Document</title>
    <style>
        .im {
            height: 150px;
            width: 100%;
            margin-bottom: 20px;
        }

        .im>div {
            height: 100%;
            width: 100%;
        }

        .num {
            width: 73px;
            height: 73px;
            font-size: 16px;
            text-align: center;
            display: block;
            margin: 50px 0 0 0;
            font-size: 20px;
            color: #000;
            border: 1px solid black;
        }

        .jian {
            position: absolute;
            top: 0;
            left: 82px;
        }

        .jia {
            position: absolute;
            top: 38px;
            left: 82px;
        }

        .media img {
            width: 100px;
            height: 100px;
        }

        p {
            font-size: 20px;
            color: red
        }

        .content h1 {
            height: 200px;
            position: relative;
            left: 15%;
            line-height: 200px;

        }


        .abc {
            width: 100%;
        }
    </style>
</head>

<body>
    <script src="../tools/jquery.min.js"></script>
    <script src="../js/tools.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/cookie.js"></script>


    <!-- 顶部 -->
    <div class="nav-w">
        <div class="w1200 nav">
            <div class="heater-nav-content">
                <a href="./index.html">
                    <i></i>
                    首页
                </a>
                <a href="">
                    <i></i>
                    商城
                </a>
                <a href="">
                    我的订单
                </a>
                <a href="">

                    关于我们
                    <i class="icon-deltail"></i>
                </a>
            </div>
        </div>
    </div>
    <!-- 头部-->
    <div class="head">
        <header class="w1200">
            <img src="https://s10.mogucdn.com/mlcdn/c45406/190102_088f4i166l4gkl08k297h5kk8690i_260x200.png" alt="">
            <div class="header-ca">
                <i></i>
                目录
            </div>
            <div class="right">
                <div>
                    <!-- 搜索栏 -->
                    <div class="search bar1">
                        <form>
                            <input type="text" placeholder="请输入您要搜索的内容...">
                            <button type="submit"></button>
                        </form>
                    </div>
                    <!-- 导航栏 -->
                    <div class="r-nav">
                        <figure>
                            <img src="https://s10.mogucdn.com/mlcdn/c45406/181016_626h76eek6jgl5621492ck0438af3_48x44.png"
                                alt="">
                            <figcaption>消息</figcaption>
                        </figure>
                        <figure>
                            <img src="	https://s10.mogucdn.com/mlcdn/c45406/181016_1e18fbc53dab5f8f6c45h6e57954d_44x44.png"
                                alt="">
                            <figcaption>收藏</figcaption>
                        </figure>
                        <figure>
                            <img src="https://s10.mogucdn.com/mlcdn/c45406/181016_22cba5f6a88gdl2gf42i14hj7flk8_48x46.png"
                                alt="">
                            <figcaption> <a href="">购物车</a> </figcaption>
                        </figure>
                        <figure>
                            <img src="https://s10.mogucdn.com/mlcdn/c45406/181205_2f1dbgdfffde6147cfl3e09864lge_40x40.png"
                                alt="">
                            <figcaption>二维码</figcaption>
                        </figure>
                    </div>
                    <!-- 登录 -->
                    <div class="login">

                        <img src="	https://s10.mogucdn.com/mlcdn/c45406/181016_143l3ehl4ebad6c2326gjk6d4h41g_48x48.png"
                            alt="">
                        <a href="./login.html"> 登录
                        </a>
                    </div>
                </div>

            </div>
        </header>
    </div>

    <div class="im">
        <div
            style="background-image: url(https://s10.mogucdn.com/mlcdn/c45406/180411_2ff0j9ed072h69l372h2l5f4jjb7e_3840x300.png);background-repeat: no-repeat;background-size: cover;background-position: center center;">
        </div>
    </div>
    <div class="container w1200"></div>
    <script>
        setPage();
        //动态生成页面
        function setPage() {

            //获取localStorage中cart数据
            let cart = window.localStorage.getItem('cart');


            if (cart === null) {
                $('.container').html(`<h1>您的购物车空空的哦！⭐╮（￣﹏￣）╭⭐</h1>`);
            } else {
                cart = JSON.parse(cart);
                console.log(cart);
                if (cart.length === 0) {
                    $('.container').html(`<h1>您的购物车空空的哦！⭐╮（￣﹏￣）╭⭐</h1>`);
                } else {
                    // 动态生成页面

                    // 先定义变量 存储 结果
                    let bool = true;
                    let type = 0; // 商品种类
                    let row = 0; // 商品数量
                    let money = 0; // 商品总价

                    // 第一部分内容 li标签之前的内容
                    let str = `      
          <div class="panel panel-info ">
            <div class="panel-body bg-info">
              <div class="checkbox">
                <label>
                  <input name="all"  type="checkbox" value="">
                  全选
                </label>
              </div>
            </div>
            <div class="panel-footer">
                <ul class="cart-list">
              `;

                    // 第二部分内容 li标签 是 格局数据动态生成的
                    // item是存储数据的对象
                    cart.forEach(item => {
                        // 如果 buy属性 有 false 给 bool变量赋值 false
                        if (item.buy === false) {
                            bool = false;
                        } else {
                            // 有一个商品选中 累加 商品种类 件数 价格
                            // 种类 累加 1
                            type += 1;
                            // 件数 累加 num属性值
                            row += item.num - 0;
                            // 总价 累加 件数*单价
                            money += (item.num - 0) * (item.goods_price - 0);
                        }

                        str += `
                        
              <li class="cart-item">
                <div class="left">
                  <input name="other" goods_id="${item.goods_id}" type="checkbox" ${item.buy ? 'checked' : ''}>
                </div>
                <div class="right">
                  <div class="media">
                    <div class="media-left">
                      <a href="#">
                        <img class="media-object" src="${item.goods_small_logo}" alt="...">
                      </a>
                    </div>
                    <div class="media-body abc" >
                      <h4 class="media-heading">${item.goods_name}</h4>
                      <p>
                        <i class="glyphicon glyphicon-yen"></i>
                        <span>${item.goods_price}</span>
                      </p>
                      <div class="btn-group pull-right" role="group" aria-label="...">
                        <button name="-" goods_id="${item.goods_id}" type="button" class="btn btn-default" ${item.num - 0 === 1 ? 'disabled' : ''}>-</button>          
                        <button type="button" class="btn btn-default" disabled>${item.num}</button>
                        <button name="+" goods_id="${item.goods_id}" type="button" class="btn btn-default"  ${item.num - 0 === item.goods_number - 0 ? 'disabled' : ''}>+</button>
                      </div>
                      <button name="del" goods_id="${item.goods_id}" class="del btn btn-danger">我不要了</button>

                    </div>
                  </div>
                </div>
              </li>
              
            `
                    })

                    // 第三部分内容 li标签 之后的内容
                    str += `
                </ul>
            </div>
          </div>
          <div>
            <h1>您一共买了${type}种商品</h1>
            <h1>您一共买了${row}件商品</h1>
            <h1>您一共需要支付${money.toFixed(2)}元</h1>
          </div>
          
          `;

                    // 将字符串 最终写入标签
                    $('.container').html(str);

                    // 设定全选input标签 checked属性
                    $('[name="all"]').prop('checked', bool);
                }
            }

        }

        //事件委托点击事件
        $('.container').click(function (e) {
            let cart = JSON.parse(window.localStorage.getItem('cart'));
            if (e.target.getAttribute('name') === 'all') {
                cart.forEach(item => {
                    item.buy = $(e.target).prop('checked');
                    
                })
            }else if(e.target.getAttribute('name') === 'other'){
                for(var i = 0;i<cart.length-1; i++){
                    if( cart[i].goods_id === e.target.getAttribute('goods_id')){
                        cart[i].buy = $(e.target).prop('checked');
                    }
                }
            }else if(e.target.getAttribute('name') === 'del'){
                for( var i = 0 ; i<=cart.length-1; i++){
                    if( cart[i].goods_id === e.target.getAttribute('goods_id') ){
                        cart.splice( i ,1 );
                    }
                }
            }else if( e.target.getAttribute('name') === '-'){
                for(var i = 0; i<=cart.length-1; i++){
                    if(cart[i].goods_id === e.target.getAttribute('goods_id')){
                        cart[i].num = cart[i].num - 0 -1<0?0:cart[i].num - 0 -1;
                    }
                }
            }else if(e.target.getAttribute('name') === '+'){
                for( var i = 0; i<=cart.length-1; i++ ){
                    if( cart[i].goods_id === e.target.getAttribute('goods_id') ){
                        cart[i].num = cart[i].num - 0 +1>cart[i].goods_number?cart[i].goods_number:cart[i].num - 0 +1;
                    }
                }
            }

            window.localStorage.setItem('cart' , JSON.stringify( cart ));
            setPage();

        })

    </script>
</body>

</html>